<div class="ml-8 w-80" id="recommend-container">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold">推荐观看</h2>
            <button id="refresh-btn" class="text-sm text-blue-600 hover:underline focus:outline-none">换一批</button>
        </div>
        <!-- Recommended Movie -->
        {% for movie in recommend %}
            <a href="{{ url_for('user.movie_detail', movie_id=movie.id) }}" class="block hover:shadow-xl transition-shadow duration-200">
                <div class="flex mb-4 pb-4 border-b border-gray-100">
                    <div class="w-20 h-28 flex-shrink-0">
                        <img src="{{ url_for('static', filename=movie.image_link) }}" class="w-full h-full object-cover rounded">
                    </div>
                    <div class="ml-4">
                        <h3 class="font-semibold mb-1 truncate max-w-[160px]" title="{{ movie.name }}">{{ movie.name }}</h3>
                        <div class="rating-stars text-sm mb-1">
                            {% set score = movie.rate %}
                            {% set star_count = score / 2 %}
                            {% set full_stars = star_count | int %}
                            {% set half_star = 1 if star_count - full_stars >= 0.5 else 0 %}
                            {% set empty_stars = 5 - full_stars - half_star %}

                            {# 实心星星 #}
                            {% for i in range(full_stars) %}
                                <i class="fas fa-star"></i>
                            {% endfor %}

                            {# 半星 #}
                            {% if half_star %}
                                <i class="fas fa-star-half-alt"></i>
                            {% endif %}

                            {# 空心星星 #}
                            {% for i in range(empty_stars) %}
                                <i class="far fa-star"></i>
                            {% endfor %}
                        </div>
                        <p class="text-sm text-gray-500">{{ movie.rate }} 分</p>
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>
</div>